<div class="deer_page_id" data-deer-id="home">
    <div class="deer_top"></div>
    <!-- 标题设置 -->
    {php}
    $pageData['title'] = isset($pageData['title']) ? $pageData['title'] : [
            'text'=>'宇鹿家政PRO'
            ,'logo_show'=>'2'
            ,'logo'=>''
        ];
    {/php}
    <div class="deer_title_box deer_can_edit" data-deer-block="title" title="点击编辑" data-toggle="tooltip">
        {if condition="$pageData['title']['logo_show']==1"}
        <div class="deer_title_logo">
            <img src="{$pageData['title']['logo']}" alt=""/>
        </div>
        {else}
        <div class="deer_title_text">{$pageData.title.text}</div>
        {/if}
    </div>
    <!-- 热门搜索词 -->
    <div class="deer_tag_key deer_can_edit " data-deer-block="tags" title="点击编辑" data-toggle="tooltip">
        {foreach name="pageData.tags" item="vo"}
            <div class="deer_tag">{$vo}</div>
        {/foreach}
    </div>
 
    <div class="deer_clear"></div>
    <!-- 幻灯广告 -->
    <div class="deer_banner_slide deer_can_edit"  data-deer-block="slide"  title="点击编辑" data-toggle="tooltip">
        {php}
            $slide_img="";
            $slide = $pageData['slide']['img'];
            $slide = explode(',',$slide);
            if(count($slide)>0){
                $slide_img=$slide[0];
            }
        {/php}
        <img src="{$slide_img}" alt="">
    </div>
    <!-- 服务保障 -->
    <div class="deer_guarantee_box deer_can_edit" data-deer-block="guarantee" title="点击编辑" data-toggle="tooltip">
        {php}
            $guarantee_items = isset($pageData['guarantee']) ? $pageData['guarantee'] : [
                ['icon'=>'cuIcon-time','text'=>'迟到必赔'],
                ['icon'=>'cuIcon-refresh','text'=>'不满意重做'],
                ['icon'=>'cuIcon-service','text'=>'7x24小时服务'],
                ['icon'=>'cuIcon-safe','text'=>'全程保障']
            ];
        {/php}
        {foreach name="guarantee_items" item="item"}
        <div class="deer_guarantee_item">
            <div class="deer_guarantee_icon">
                <i class="fa {$item.icon}"></i>
            </div>
            <div class="deer_guarantee_text">{$item.text}</div>
        </div>
        {/foreach}
    </div>
 
    <div class="deer_clear"></div>
    <div class="deer_cate_box deer_can_edit"  title="点击编辑"  data-deer-block="cate"  data-toggle="tooltip">
        {foreach name="dataHome.category" item="vo"}
        <div class="deer_cate">
            <div class="deer_cate_icon">
                {if condition="$vo.img"}
                <img src="{$vo.img}" alt=""/>
                {/if}
            </div>
            <div class="deer_cate_txt">{$vo.name}</div>
        </div>
        {/foreach}
    </div>
    <!-- 滚动的公告，展示一行 -->
    {php}
        $pageData['notice'] = isset($pageData['notice']) ? $pageData['notice'] :"点击编辑公告";
    {/php}
    <div class="deer_notice_box deer_can_edit" data-deer-block="notice" title="点击编辑" data-toggle="tooltip">
        <div class="deer_notice_icon">
            <i class="fa fa-volume-up"></i>
        </div>
        <div class="deer_notice_content">
            <div class="deer_notice_scroll">
                <div class="deer_notice_text">{$pageData.notice}</div>
            </div>
        </div>
    </div>
    <div class="deer_door_box deer_can_edit"  data-deer-block="block"  title="点击编辑" data-toggle="tooltip">
        <div class="deer_door_box_con">
            <div class="deer_title">{$pageData.block.title}<span>{$pageData.block.desc}</span></div>
            <div class="deer_items">
                {php}
                    $block_txt = json_decode($pageData['block']['json'],true);
                    $block = $pageData['block']['img'];
                    $block = explode(',',$block);
                {/php}
                {foreach name="block" item="vo"}
                <div class="deer_cate">
                    <div class="deer_cate_icon">
                        {if condition="$vo"}
                        <img src="{$vo}" alt=""/>
                        {/if}
                    </div>
                    <div class="deer_cate_txt">{$block_txt[$key]['desc']}</div>
                </div>
                {/foreach}
            </div>
        </div>
    </div>
    <div class="deer_banner_slide  deer_can_edit"  data-deer-block="banner_center"  title="点击编辑" data-toggle="tooltip" style="height: auto;">
        {if condition="$pageData.banner_center.img"}
        <img src="{$pageData.banner_center.img}" style="height: auto;min-height: 20px;" alt="">
        {else}
        <div style="text-align: center;width:100%;height:60px;background:#fff;padding-top: 20px;">【中间Banner】不显示</div>
        {/if}
    </div>

    <div class="deer_clear"></div>
    <div class="deer_items_list">
        这里是服务列表，在【服务项目】板块选择首页展示的服务项目，每一个类目最多展示6个
    </div>
    <div class="deer_clear"></div>
    <div class="deer_banner_slide  deer_can_edit"  data-deer-block="banner_bottom"  title="点击编辑" data-toggle="tooltip" style="height: auto;">
        {if condition="$pageData.banner_bottom.img"}
        <img src="{$pageData.banner_bottom.img}" style="height: auto;min-height: 20px;" alt="">
        {else}
        <div style="text-align: center;width:100%;height:60px;background:#fff;padding-top: 20px;">【底部Banner】不显示</div>
        {/if}
    </div>
    
    <div class="deer_clear" style="height: 50px;"></div>
</div>
<link rel="stylesheet" href="__CDN__/assets/addons/deerhome/css/colorui-font-icon.css"></link>
<style>
    .deer_top{
        display: block;
        width: 100%;
        height: 50px;
        background-color: #07C160;
    }
    .deer_title_box{
        background-color: #07C160;
        color: #fff;
    
    }
    .deer_title_logo img{
        max-width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .deer_title_text{
        color: #fff;
        text-align: center;
        font-weight: bold;
    }
    .deer_tag_key{
        width: 100%;
        overflow-y:hidden ;
        overflow-x: auto;
        background-color: #07C160;
        color: #fff;
        font-size: 12px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        box-sizing: border-box;
        position: relative;
        z-index: 2;
        height: 40px;
    }
    
    .deer_tag_key::-webkit-scrollbar {
        height: 0px;
    }
    .deer_tag_key::-webkit-scrollbar-thumb {
        background-color: #ccc;
        border-radius: 5px;
    }
    .deer_tag{
        background-color: rgba(255, 255, 255, 0.15);
        padding: 5px 12px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 12px;
        flex-shrink: 0;
        margin: 0 5px;
    }
    .deer_banner_slide {
        width: 96%;
        height: 124px;
        margin:0 auto;
        border-radius: 10px;
        overflow: hidden;
        -webkit-transform: translateY(0);
        transform: translateY(0);
        background-color: #f8f8f8;
    }
    .deer_banner_slide img{
        width: 100%;
        height: 124px;
        display: block;
    }
    
    /* 服务保障样式 */
    .deer_guarantee_box {
        width: 96%;
        margin: 10px auto;
        background-color: rgba(7, 193, 96, 0.1);
        border-radius: 10px;
        display: flex;
        justify-content: space-between;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .deer_guarantee_item {
        width: 25%;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
    
    .deer_guarantee_icon {
        color: #07C160;
        font-size: 18px;
        margin-right: 5px;
    }
    
    .deer_guarantee_text {
        font-size: 12px;
        color: #333333;
        opacity: 0.8;
    }
    
    .deer_cate_box{
        width: 96%;
        margin: 0 auto;
        height: 200px;
        background-color: #f8f8f8;
        display: flex;
        padding: 0px 10px 15px 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 12px;
        color: #555;
    }
    .deer_cate{
        width: 20%;
        height: 78px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-direction: column;
        padding-top: 5px;
        margin-top: 13px;
    }
    .deer_cate_icon{
        background-color: #ccc;
        height: 46px;
        width: 46px;
        display: block;
        flex-shrink: 0;
    }
    .deer_cate_icon img {
        height: 46px;
        width: 46px;
        display: block;
        flex-shrink: 0;
        background-color: #f7f7f7;
    }
    .deer_door_box{
        padding:  13px 0;
        box-sizing: border-box;
        width: 96%;
        margin: 0 auto;
        background-color: #f7f7f7;
    }
    .deer_door_box_con {
        padding:10px;
        box-sizing: border-box;
        background-color: #ffffff;
        border-radius: 10px;
        overflow: hidden;
    }
    .deer_title {
        width: 100%;
        font-size: 17px;
        line-height: 17px;
        font-weight: bold;
        text-align: center;
        padding: 15px 0;
        display: flex;
        align-items: center;
        color: #333;
    }
    .deer_title span{
        color: #EF1346;
        font-size: 14px;
        font-weight: 400;
        padding-left: 13px;
    }
    .deer_items {
        display: flex;
        align-items: center;
        flex-flow: wrap;
        justify-content: center;
    }
   .deer_items .deer_cate{
        width: 25%;
        padding: 0px 10px !important;
        flex-shrink: 0;
        height: 50px;
    }
   .deer_items .deer_cate_icon{
        width: 31px;
        height: 31px;
    }
   .deer_items .deer_cate_icon img{
        background-color: #fff;
        width: 31px;
        height: 31px;
    }
    .deer_items_list{
        background-color: #fff;
        width: 96%;
        margin: 0 auto;
        height: 200px;
        text-indent: 2em;
        padding-top: 80px;
        border-radius: 10px;
        text-align: center;
    }
    
    /* 滚动公告样式 */
    .deer_notice_box {
        width: 96%;
        margin: 2px auto;
        background-color: rgba(7, 193, 96, 0.1);
        border-radius: 10px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        height: 40px;
        overflow: hidden;
    }
    
    .deer_notice_icon {
        color: #07C160;
        font-size: 16px;
        margin-right: 10px;
        flex-shrink: 0;
    }
    
    .deer_notice_content {
        flex: 1;
        overflow: hidden;
        height: 100%;
    }
    
    .deer_notice_scroll {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: center;
    }
    
    .deer_notice_text {
        color: #07C160;
        font-size: 14px;
        white-space: nowrap;
        animation: noticeScroll 15s linear infinite;
        position: absolute;
        left: 100%;
    }
    
    @keyframes noticeScroll {
        0% {
            left: 100%;
        }
        100% {
            left: -100%;
        }
    }
</style>